<template>
    <div class="common-info-container">
        <el-form :model="commonInfo" :rules="rules" ref="commonInfoRef" class="common-info" spellcheck="false"
            @submit.native.prevent>
            <el-row style="height:calc(var(--font-size) * 2 + 10px);width: 100%;padding: 5px;">
                <el-col :span="12">
                    <el-form-item label="数据库信息" label-width="130px" prop="glueParams.dbSequence" class="db-info">
                        <el-row style="width: 100%;">
                            <el-col :span="12" style="padding-right: 10px;">
                                <el-select v-model="dbType" placeholder="请选择数据库" @clear="clearDb" @change="clearDb"
                                    class="input-auto-resize">
                                    <el-option v-for="item in dbTypes" :key="item" :label="item" :value="item" />
                                </el-select>
                            </el-col>
                            <el-col :span="12">
                                <el-select v-model="commonInfo.glueParams.dbSequence" placeholder="请选择实例"
                                    class="input-auto-resize">
                                    <el-option v-for="(item, index) in dbNames" :key="index" :label="item.name"
                                        :value="item.sequence">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="counter">
                    <span style="padding-right: 50px">{{ "已输入:" + commonInfo.glueSource.length }}</span>
                </el-col>
            </el-row>
            <el-row style="height: calc(100% - var(--font-size) * 2 - 10px);">
                <el-form-item prop="glueSource" class="glueSource">
                    <aceEditor v-model="commonInfo.glueSource" style="height: 100%;" ref="editorRef" />
                </el-form-item>
            </el-row>
        </el-form>
    </div>
</template>
<script setup>
import { isInArray } from "@/utils/tools"

let dbType = $ref("")
let dbNames = $ref([])
let dbTypes = $ref([])
let dbLists = $ref({})
let commonInfo = $ref({ glueSource: '', glueParams: { dbSequence: "" } })
const emits = defineEmits(["change"])

const checkScript = (rule, value, callback) => {
    if (value === '' || value === null || value === undefined) {
        return callback(new Error("脚本不能为空"))
    } else {
        callback()
    }
}

let rules = {
    "glueParams.dbSequence": { required: true, message: '请选择数据库信息', trigger: [] },
    glueSource: [{ validator: checkScript }]
}

const clearDb = () => {
    commonInfo.glueParams = {}
}
const commonInfoRef = $ref(null)

const validate = () => {
    return commonInfoRef.validate().catch((() => {
        return false
    }))
}

const chooseDbType = () => {
    for (let key in dbLists) {
        const db = dbLists[key]
        const sequence = db.map(e => {
            return e.sequence
        })
        if (isInArray(commonInfo.glueParams.dbSequence, sequence)) {
            return key
        }
    }
    return ""
}

const save = () => {
    return commonInfo
}

const fill = (data) => {
    if (data) {
        if (data.glueSource) commonInfo.glueSource = data.glueSource
        if (data.glueParams) {
            commonInfo.glueParams = data.glueParams
            if (!dbType) {
                dbType = chooseDbType()
            }
        }
        if (data.db) {
            dbTypes = Object.keys(data.db)
            dbLists = data.db
        }
    }
}

watch(() => commonInfo.glueParams.dbSequence, (val) => {
    nextTick(() => {
        if (val) {
            commonInfoRef.validateField('glueParams.dbSequence')
        }
    })
})

watch(() => dbType, (newVal) => {
    dbNames = dbLists[newVal]
})

watch(() => commonInfo.glueSource, (newVal) => {
    commonInfoRef.validate().catch()
    emits("change", newVal)
})

defineExpose({ validate, save, fill })
</script>

<style scoped>
:deep(.el-form-item__error) {
    top: 26%;
    right: 25px;
    left: unset;
    font-size: calc(var(--font-size) - 4px);
}

:deep(.tool) {
    position: absolute;
    right: -20px;
    z-index: 999;
    top: -14px;
}

:deep(.db-info) {
    margin-bottom: 0 !important;
}

:deep(.glueSource .el-form-item__content) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

:deep(.glueSource .el-form-item__error) {
    top: 1px !important;
    right: unset;
    left: 50px;
    z-index: 999;
}

:deep(.el-select .el-input.is-disabled .el-input__inner),
:deep(.el-input.is-disabled .el-input__icon) {
    cursor: default;
}

:deep(.el-form-item label) {
    margin-top: 5px;
    font-size: 13px;
}

:deep(.counter) {
    padding-right: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>

<style>
.source .el-message-box__header {
    border-bottom: 1px solid #ebeef5 !important;
}

.source .el-input__inner {
    height: 30px;
}

.source .el-message-box__input {
    padding-top: 5px;
    height: 32px;
}

.common-info-container,
.common-info,
.glueSource {
    height: 100%;
    width: 100%;
}

.common-info .el-form-item__label {
    font-size: var(--font-size);
    line-height: calc(var(--font-size) * 2);
}
</style>
